<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>描边高亮</title>
    <style>
        bosy {
            padding: 0;
            margin: 0;
        }

        .container {
            display: grid;
            margin: 0 auto;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
            background: #000;
            width: 100%;
            text-align: center;
            color: #f8f8f8;
        }

        .card {
            aspect-ratio: 4/3;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(closest-side circle, rgba(255, 255, 255, 0.3), #fff);
            transform: translate(var(--x, -10000000px), var(--y, -10000000px));
        }

        .inner {
            position: absolute;
            /*撑满父元素*/
            inset: 5px;
            background: #222;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <div class="card">
        <div class="inner">lorem ipsum dolor sit amet.</div>
    </div>
    <script>
        const cards = document.querySelectorAll('.card')
        const container = document.querySelector('.container')
        document.addEventListener("mousemove", (e) => {
            cards.forEach(card => {
                const rect = card.getBoundingClientRect()
                const x = e.clientX - rect.left - rect.width/2
                const y = e.clientY - rect.top - rect.height/2
                card.style.setProperty('--x', `${x}px`)
                card.style.setProperty('--y', `${y}px`)
            })
        })
    </script>
</div>
</body>
</html>